#app {
    background: #F3F2F1;
    min-height: 100vh;
}

.swiper {
    width: 7.04rem;
    height: 3.09rem;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
}

.swiper-container {
    --swiper-theme-color: #ff6600;
    --swiper-pagination-color: #00ff33;
    /* 两种都可以 */
}

.search {
    background: #fff;
    width: 7.5rem;
    z-index: 11;
    padding-top: .2rem;
    height: 1.25rem;
    margin-bottom: .2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
}

.search-zhanwei {
    padding-top: .2rem;
    width: 7.5rem;
    height: 1.25rem;
    margin-bottom: .2rem;
}

.search .input {
    width: 6.92rem;
    height: .72rem;
    background: #F1F1F1;
    border-radius: .36rem;
    font-size: .23rem;
    font-weight: 400;
    color: #A9A9A9;
}

.search .input img {
    width: .38rem;
    height: .38rem;
    margin: .07rem .24rem 0 1.03rem;
}

.icons {
    width: 7.06rem;
    height: 1.66rem;
    background: #FFFFFF;
    box-shadow: 0rem .04rem .40rem 0rem rgba(63, 63, 63, 0.15);
    border-radius: .10rem;
    margin: .23rem auto .3rem;
    display: flex;
}
.icons a{
  width: 100%;
  height: 100%;
  opacity: 0;
  left: 0;top: 0;
  position: absolute;
}

.icon {
    flex: 1;
    font-size: .20rem;
    height: 1.66rem;
    color: #666;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.icon img {
    width: 1.1rem;
    height: 1.1rem;
}

.ad {
    width: 7.04rem;
    height: 1.04rem;
    margin: 0 auto;
}

.ad img {
    width: 100%;
    height: 100%;
}

.tabs {
    display: flex;
    padding: 0 .24rem;
    margin: .29rem auto .31rem;
    justify-content: space-between;
}

.tabs div {
    width: 1.70rem;
    height: .60rem;
    background: #FFFFFF;
    border: .01rem solid #E2E2E2;
    border-radius: .10rem;
    font-size: .24rem;
    font-weight: 400;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tabs .active {
    background: #08D27D;
    color: #fff;
    border: none;
    box-shadow: 0rem .04rem .40rem 0rem rgba(63, 63, 63, 0.15);
}

.list-item {
    width: 7.04rem;
    height: 2.30rem;
    background: #FFFFFF;
    box-shadow: 0rem .10rem .35rem 0rem rgba(242, 236, 229, 0.76);
    border-radius: .10rem;
    margin: 0 auto .16rem;
    display: flex;
    position: relative;
    padding: .20rem .16rem;
}
.list-item a{
    width: 100%;
    height: 100%;
    opacity: 0;
    left: 0;top: 0;
    position: absolute;
}

.list-item .cover {
    width: 2.30rem;
    height: 1.86rem;
    border-radius: .10rem;
    background: #333333;
}

.list-item .info {
    width: 4rem;
    margin-left: .12rem;
}

.info .title {
    font-size: .24rem;
    font-weight: 400;
    color: #1B1B1B;
    margin-bottom: .05rem;
}

.info .content {
    font-size: .20rem;
    font-weight: 400;
    color: #A8A8A8;
    margin-bottom: .05rem;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.info .btn {
    width: .90rem;
    color: #FF7826;
    height: .27rem;
    background: #fff;
    border: .01rem solid #FF7826;
    border-radius: .13rem;
    font-size: .10rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
}